import{ onMounted, onUnmounted, type Ref } from "vue"
const useClickOutside = (elementRef:Ref<undefined | HTMLElement>,callback:(e:MouseEvent)=>void)=>{
  const handler = (e:MouseEvent)=>{
    if(elementRef.value && e.target){
      // 不包含时，说明在外侧。
      if(!elementRef.value.contains(e.target as HTMLElement)){
        callback(e)
      }
    }
  }
  onMounted(()=>{
    document.addEventListener('click',handler)
  })
  onUnmounted(()=>{
    document.removeEventListener('click',handler)
  })
}
export default useClickOutside
// 利用 contains() 方法：

